/* global variables */
@layer grist-base {
  :root {
    --color-logo-row:  #F9AE41;
    --color-logo-col:  #2CB0AF;
    --color-logo-cell: #DEDDDD;
    --color-logo-bg:   #42494B;

    --color-link-default: #336;
    --color-link-visited: #336;
    --color-link-hover:   #66c;
    --color-link-active:  #66c;

    --color-link-bright: orange;

    --color-start-page-bg: #f0f0f0;

    --color-navbar-bg: var(--color-logo-bg);
    --color-navbar-btn-bg: #fefefe;
    --color-navbar-btn-bg-hover: #f6f6f6;
    --color-navbar-btn-disabled: #ccc;

    --color-tab-bar-bg: #d6d6d6;

    --color-border-light: #ddd;
    --color-border-medium: #bbb;

    --color-btn-login: #ffb749;
    --color-btn-login-background: #fff1dc;
    --color-btn-createdoc: #3fda2c;
    --color-btn-uploaddoc: #00dcff;
    --color-btn-decline: #c74646;
    --color-btn-accept: #3eda2c;

    --layout-top-spacer: 20px;

    --color-list-row-hover: #f0f0f0;

    --color-list-item: #f6f6f6;
    --color-list-item-hover: #e0e0e0;
    --color-list-item-selected: #e8d53d;
    --color-list-item-disabled: #ccc;
    --color-list-item-action: #6eec6e;

    --color-hint-text: #888;

    --scroll-bar-width: 12px;

    /* fonts */
    --font-navbar-title: "Helvetica", "Arial", sans-serif;
    --font-btn-symbols: "Apple Symbols", "Arial Unicode MS";
  }



  .flexhbox {
    display: -webkit-flex;
    display: flex;
  }
  .flexvbox {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .flexitem {
    /* Makes the flex item flexible and sets the flex basis to zero (disregards content size). */
    -webkit-flex: 1 1 0px;
    flex: 1 1 0px;
    /* Min-width of 0 is needed to allow the flex box to shrink below its minimum content size. */
    min-width: 0px;
  }
  .flexnone {
    /* Sizes the item based on content or width/height, and makes it fully inflexible. */
    -webkit-flex: none;
    flex: none;
  }
  .flexauto {
    /* Sizes the item based on content or width/height, and makes it fully flexible. */
    -webkit-flex: auto;
    flex: auto;
  }
  .clipped {
    overflow: hidden;
  }

  body {
    /* This seems logically appropriate since we never want body to scroll, but the real reason is
    * to avoid a major slowdown when using $().modal() dialogs (a JQuery plugin in bootstrap).
    * Those add/remove a class to body which sets "overflow: hidden", which causes great slowness on
    * Firefox (not Chrome). If body is already "overflow: hidden", it's much faster.
    */
    overflow: hidden;
  }

  .show_scrollbar::-webkit-scrollbar {
    width: var(--scroll-bar-width);
    height: var(--scroll-bar-width);
    background-color: var(--scroll-bar-bg, #f0f0f0);
  }
  .show_scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar-fg, #a8a8a8);
    -webkit-border-radius: 100px;
    border: 2px solid var(--scroll-bar-bg, #f0f0f0);
  }
  .show_scrollbar::-webkit-scrollbar-thumb:vertical {
    min-height: 4rem;
  }
  .show_scrollbar::-webkit-scrollbar-thumb:horizontal {
    min-width: 4rem;
  }
  .show_scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-bar-hover-fg, #8f8f8f);
    -webkit-border-radius: 100px;
  }
  .show_scrollbar::-webkit-scrollbar-thumb:active {
    background-color: var(--scroll-bar-active-fg, #7c7c7c);
    -webkit-border-radius: 100px;
  }
  .show_scrollbar::-webkit-scrollbar-corner {
    background-color: var(--scroll-bar-bg, #f0f0f0);
  }
  div.dev_warning {
    position: absolute;
    z-index: 10;
    width: 100%;
    opacity: 0.5;
    pointer-events: none;
    font-size: 200%;
    color: white;
    background: red;
    text-align: center;
  }
  #browser-check-problem {
    display: none;
    width: 100%;
    position: absolute;
    z-index: var(--grist-browser-check-z-index);
    bottom: 0;
    left: 0;
    padding: 4px;

    /* Copy common styles that are normally set from JS-generated CSS */
    box-sizing: border-box;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 13px;
    line-height: 16px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }
  .browser-check-wrapper {
    margin: auto;
    max-width: 600px;
    padding: 8px 24px;
    background-color: #040404;
    border-radius: 4px;
    border: none;
    color: white;
    box-shadow: 0 0 4px 0 white;
  }
  .browser-check-wrapper td {
    vertical-align: middle;
    padding: 8px 16px;
  }
  .browser-check-mobile {
    display: none;
  }
  .browser-check-is-mobile .browser-check-mobile {
    display: inline;
  }
  .browser-check-is-mobile .browser-check-desktop {
    display: none;
  }
  .browser-check-wrapper a {
    color: #16B378;
    text-decoration: underline;
  }
  .browser-check-wrapper a:hover {
    color: #b1ffe2;
  }

  .browser-check-close {
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #009058;
    color: white;
    cursor: pointer;
  }
  .browser-check-close:hover {
    background-color: #16B378;
  }
}
